<template>
	<view class="box">
		<view class="box_one" v-for="item in list1" :key="item.id">
			<view class="" style="background-color: #ccc;border-top-left-radius: 0.4rem;border-top-right-radius: 0.4rem;border:1px solid #FFF ;"
				@click="handleVideo(item.videoUrl)">
				<video :src="item.videoUrl" :show-center-play-btn="false" :controls="false" style="width: 100%;border-top-left-radius: 0.4rem;border-top-right-radius: 0.4rem;" ></video>
			</view>
			<view class="box_one_text">{{item.videoTitle}}</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		baseUrl
	} from '../../utils/config.js';
	export default {
		data() {
			return {
				list1: [],
				name: "null",
				listrex: []
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			getList() {
				var thas = this
				uni.request({
					url: `${baseUrl}/wechat/InfoVideo/list`,
					method: 'GET',

					success(res) {
						thas.list1 = res.data.rows.map(item => {
							return {
								...item,
								videoUrl: baseUrl + item.videoUrl
							}
						})
					},

				});
			},
			handleVideo(row) {
				console.log(row,"re'q'w'r'q'w'r")
				if (!uni.getStorageSync('ykt_userId')) {
					this.$refs.uToast.show({
						type: 'default',
						message: "去登录",
					})
					uni.switchTab({
						url: '/pages/my/index'
					});
					return
				}
				uni.navigateTo({
					url: `/pages/special/videoS?id=${row}`
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.box {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		flex-direction: row;
		padding: 10px;
		background-color: #f4f4f4;
		height: 100vh;
		overflow-y: auto;
		// overflow-x: hidden;

		.box_one {
			width: 100%;
			height: 270px;
			background-color: #fff;
			border-radius: 8px;
			margin-bottom: 10px;


			// box-shadow: 2px 3px 2px 4px #f4f4f4;
			.box_one_img {
				width: 100%;
				height: 80%;
				border-top-left-radius: 8px;
				border-top-right-radius: 8px;
			}

			.box_one_text {
				height: 20%;
				width: 100%;
				text-align: left;
				font-size: 12px;
				box-sizing: border-box;
				padding: 3px;
				display: -webkit-box;
				/* 设置为弹性盒子 */
				-webkit-box-orient: vertical;
				/* 设置为垂直方向 */
				overflow: hidden;
				/* 隐藏超出部分 */
				-webkit-line-clamp: 3;
				/* 设置显示的行数为3行 */
				color: #606266;
			}
		}
	}
</style>